<!-- 组件说明 -->
<template>
  <div class=''>
    <van-nav-bar title="收货地址"
                 left-text="返回"
                 left-arrow
                 :fixed=true
                 @click-left="handleBack" />
    <van-address-list v-model="chosenAddressId"
                      :list="addressList"
                      @add="handleAdd"
                      @edit="handleEdit" />
  </div>
</template>

<script>

export default {
  name: 'addressInfo',
  data () {
    return {
      chosenAddressId: 2,
      addressList: [
        {
          id: 1,
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
        },
        {
          id: 2,
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号'
        },
        {
          id: 3,
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号'
        },
        {
          id: 4,
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号'
        }
      ]
    };
  },
  components: {

  },
  computed: {

  },
  created () {

  },
  methods: {
    /* 返回上一页 */
    handleBack () {
      this.$router.go(-1);
    },
    /* 处理新增地址 */
    handleAdd () {
      if (this.addressList.length >= 5) {
        this.$notify({ type: 'warning', message: '收货地址不能超过5个' });
      } else {
        this.$router.push({ name: 'addAddress' })
      }
    },
    /* 处理编辑地址 */
    handleEdit (item) {
      this.$router.push({ name: 'addAddress', query: { id: item.id } })
    }
  },
  mounted () {
    /* 正式请求时修改：请求获取地址，如没有收货地址需要提示用户添加 */
    if (this.addressList.length === 0) {
      this.$toast({
        message: '暂无收货地址，点击页面下方按钮进行添加'
      });
    }
  }
}
</script>

<style lang='css' scoped>
.van-address-list {
  margin-top: 100px;
}
</style>